<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动效果</title>
<!--    <script src="../lib/jquery-3.4.1.js"></script>-->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>

        #dic1{

            margin-top: 30px;
            padding: 5px;
            text-align: center;
            background-color: darkseagreen;
            border: solid 1px #c3c3c3;


        }


        #dic2{

            padding: 50px;
            text-align: center;
            background-color: orange;
            border: solid 1px #c3c3c3;
            display: none;
            margin-bottom: 40px;
        }




        #dic3{

            margin-top: 30px;
            padding: 5px;
            text-align: center;
            background-color: darkseagreen;
            border: solid 1px #c3c3c3;


        }


        #dic4{

            padding: 50px;
            text-align: center;
            background-color: orange;
            border: solid 1px #c3c3c3;
            margin-bottom: 40px;
        }


        #dic5{

            margin-top: 30px;
            padding: 5px;
            text-align: center;
            background-color: darkseagreen;
            border: solid 1px #c3c3c3;


        }


        #dic6{

            padding: 50px;
            text-align: center;
            background-color: orange;
            border: solid 1px #c3c3c3;
            display: none;
            margin-bottom: 40px;
        }



    </style>




</head>
<body>


<div id="dic1" >点我下拉面板</div>
<div id="dic2">hello fmy</div>
<hr>
<div id="dic3" >点我收起面板</div>
<div id="dic4">hello fmy</div>

<hr>

<div id="dic5" >点我收起面板</div>
<div id="dic6">hello fmy</div>


<script>

    $(document).ready(function () {

        $("#dic1").click(function () {

            $("#dic2").slideDown();
        });

        $("#dic3").click(function () {

            $("#dic4").slideUp(3000,function () {

                alert("上收起完成");
            });
        });

        $("#dic5").click(function () {

            $("#dic6").slideToggle(1000,function () {

                alert("哈哈");

            });

        });


    });




</script>





</body>
</html>